<template>
  <div>
    <div class="title">
      <span>接收消息</span>
    </div>
    <div v-for="(item, index) in Data" :key="index">
      <el-row :gutter="20" style="border-color: #1f2d3d;margin-top: 10px">
        <el-col :span="16">
          <el-button
              plain
              @click="open1(item)">
            <div class="grid-content bg-purple" v-if="item.status==0" style="background-color: #d1f6eb">
              <span>{{ item.senderName }} -> {{ "title：" + item.title }}</span>
              <br/>
              <span style="margin-left: 500px">  {{ formatDateTime(item.createTime) }}</span>
            </div>
            <div class="grid-content bg-purple" v-else>
              <span>{{ item.senderName }} -> {{ "title：" + item.title }}</span>
              <br/>
              <span style="margin-left: 500px">  {{ formatDateTime(item.createTime) }}</span>
            </div>
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {deleteById, getAllByReceiver, getUnreadNum, updateStatus} from "@/api/messaage";

export default {
  name: "Received_information",
  data() {
    return {
      Data: []
    }
  },
  methods: {
    open1(item) {
      const h = this.$createElement;
      if (item.status == 0) {
        this.$notify({
          title: item.title,
          message: h('div', [
            item.content,
            h('br'),
            h('el-button', {plain: true, type: 'text', on: {click: () => this.handleDelete(item)}}, '删除'),
            h('el-button', {plain: true, type: 'danger', on: {click: () => this.handRead(item)}}, '标记已读')
          ]),
          duration: 0,
        })
      } else {
        this.$notify({
          title: item.title,
          message: h('div', [
            item.content,
            h('br'),
            h('el-button', {plain: true, type: 'text', on: {click: () => this.handleDelete(item)}}, '删除'),
          ]),
          duration: 0,
        })
      }
    },
    handRead(item) {
      console.log('标记已读');
      updateStatus({
        id: item.messageId
      }).then((res) => {
        if (res.flag == true) {
          this.$message.success("标记已读成功")
          this.load()
        } else {
          this.$message.error(res.data);
        }
      })
    },
    handleDelete(item) {
      // 处理删除逻辑
      console.log('删除按钮被点击了');
      console.log(item)
      deleteById({
        id: item.messageId
      }).then((res) => {
        if (res.flag == true) {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error(res.data);
        }
      })
      // 在这里可以添加相应的逻辑来处理删除操作
    },
    formatDateTime(dateTimeString) {
      const backendDate = new Date(dateTimeString);
      const year = backendDate.getFullYear();
      const month = String(backendDate.getMonth() + 1).padStart(2, '0');
      const day = String(backendDate.getDate()).padStart(2, '0');
      const hours = String(backendDate.getHours()).padStart(2, '0');
      const minutes = String(backendDate.getMinutes()).padStart(2, '0');
      const seconds = String(backendDate.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    load() {
      getAllByReceiver({
        receiver: this.$store.state.userId
      }).then((res) => {
        if (res.flag == true) {
          this.Data = res.data
          console.log(this.Data)
        } else {
          this.$message.error(res.data);
        }
      });
      console.log(this.$store.state.userId)
      getUnreadNum({
        id: this.$store.state.userId
      }).then((res) => {
        if (res.flag == true) {
          this.$store.commit("updateUnreadNum", res.data)
          console.log(res.data)
        } else {
          this.$message.error(res.data);
        }
      })
    }
  },
  created() {
    this.load()
  }
}
</script>

<style scoped>
.title {
  font-family: cursive;
  font-size: 18px; /* Adjust the font size as needed */
  text-align: center;
}

.title span {
  width: 100%;
  height: 46px;
  display: inline-block;
  float: left;
  background: url(../../assets/img/upload.png);
  line-height: 46px;
  position: center;
  z-index: 5;
}

.bg-purple {
  background: white;
  border-radius: 4px;
  border-color: #eeeeee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  font-size: 14px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.centered-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* 使提示框在其他元素之上 */
}
</style>